import QtQuick
import QtQuick.Controls

Item {
    id: root
    width: 310
    height: 720

    readonly property int buttonHeight: 225
    property int selected: -1

    Column {
        anchors.fill: parent
        anchors.left: root.left; anchors.rightMargin: 10
        anchors.top: root.top; anchors.topMargin: 20

        Button {
            id: btn_mode
            width: 270
            height: 90

            contentItem: Item {
                Image {
                    source: root.selected === 0 ?
                                ("qrc:///images/btn-Modes-on.png") :
                                ("qrc:///images/btn-modes-normal.png")
                }
            }
            background: Rectangle {
                opacity: 0
            }
            onClicked: {
              selected = 0
            }
        }

        ModesWidget {
            id: modesWidget
            opacity: selected === 0 ? 1 : 0

            width: 270
            height: selected === 0 ? 430 : 0
            Behavior on height { NumberAnimation { duration: 300} }
            Behavior on opacity { NumberAnimation { duration: 300} }
        }

        Button {
            id: btn_control
            width: 270
            height: 90

            contentItem: Item {
                Image {
                    source: root.selected === 1 ?
                                ("qrc:///images/btn-controls-on.png") :
                                ("qrc:///images/btn-controls-normal.png")
                }
            }
            background: Rectangle {
                opacity: 0
            }
            onClicked: {
              selected = 1
            }
        }

        Item {
            id: controls
            opacity: selected === 1 ? 1 : 0

            width: 270
            height: selected === 1 ? 430 : 0
            Image {
              width: 200
              height: 220
              source: "qrc:///images/pro.jpeg"

              anchors.horizontalCenter: controls.horizontalCenter
              anchors.verticalCenter: controls.verticalCenter
            }
            Behavior on height { NumberAnimation { duration: 300} }
            Behavior on opacity { NumberAnimation { duration: 300} }
        }

        Button {
            id: btn_alarm
            width: 270
            height: 90

            contentItem: Item {
                Image {
                    source: root.selected === 2 ?
                                ("qrc:///images/btn-Modes-on.png") :
                                ("qrc:///images/btn-modes-normal.png")
                }
            }
            background: Rectangle {
                opacity: 0
            }
            onClicked: {
                selected = 2
            }
        }

    }

}
